import { useStore } from "vuex";
import { ref, computed, ComputedRef } from "vue";

interface LoadParams {
  currentPage: number;
  pageSize: number;
}

// actionName 触发哪个action
// total是动态变化的，只有第一次发请求回来之后才知道是多少。使用 ComputedRef 专门为computed设置的类型
// params 加载参数 LoadParams类型 设置初始值
const useLoadMore = (
  actionName: string,
  total: ComputedRef<number>,
  params: LoadParams = { currentPage: 2, pageSize: 5 },
  extraData?: any
) => {
  const store = useStore();
  // 必须是响应式对象 currentPage 初始值是params中的 ,之后要每次++
  const currentPage = ref(params.currentPage);
  // 发送请求时候的参数变量
  // 这里不能直接获取 currentPage: currentPage.value, 这样就是一个常量了,我们想要的是响应式的,所以必须通过computed进行包裹一下或者reactive包裹
  const requestParams = computed(() => ({
    currentPage: currentPage.value,
    pageSize: params.pageSize,
    extraData
  }));
  // 主要loadmore的实现是依靠触发action行为,其中当前currentPage自增
  const loadMorePage = () => {
    store.dispatch(actionName, requestParams.value).then(() => {
      currentPage.value++;
    });
  };
  // 如果到了最后的一页,ui上不再显示 显示更多内容的button,需要这个变量
  const isLastPage = computed(() => {
    // 这里不应该是=== 而是小于 因为currentPage dispatch的时候会自增1
    if (total.value === 0) return false;
    return Math.ceil(total.value / params.pageSize) < currentPage.value;
  });
  return {
    loadMorePage,
    isLastPage,
    currentPage
  };
};

export default useLoadMore;
